<template>
    <div class="info">
      <mt-header title="悦来水厂3期项目" fixed style="color: #1f2d3d;background-color: #f2f3f5">
        <router-link to="/mobile_index" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
        <!--<mt-button icon="more" slot="right"></mt-button>-->
      </mt-header>
      <ul>
        <li class="tq">
          <div class="content">
            <tq></tq>
          </div>
        </li>
        <li class="znjk">
          <div class="title">
            <div class="title-name">智能监控</div>
          </div>
          <div class="content">
            <intelligent-monitoring></intelligent-monitoring>
          </div>
        </li>
        <li class="zngl">
          <div class="title">
            <div class="title-name">智能管理</div>
          </div>
          <div class="content">
            <intelligent-management></intelligent-management>
          </div>
        </li>
        <li class="xmxq">
          <div class="title">
            <div class="title-name">项目详情<div class="more">更多</div></div>
          </div>
          <div class="content">
            <project-details></project-details>
          </div>
        </li>
        <li class="rygl">
          <div class="title">
            <div class="title-name">人员管理<div class="more">更多</div></div>
          </div>
          <div class="content">
            <personnel-management></personnel-management>
          </div>
        </li>
        <li class="aqmzp">
          <div class="title">
            <div class="title-name">安全帽抓拍<div class="more">更多</div></div>
          </div>
          <div class="content">
            <helmet-snap></helmet-snap>
          </div>
        </li>
      </ul>
      <mt-tabbar v-model="selected" fixed>
        <mt-tab-item id="tab1">
          <img slot="icon" src="../../../icons/svg/home.svg" >
          首页
        </mt-tab-item>
        <mt-tab-item id="tab2">
          <img slot="icon" src="../../../icons/svg/person.svg">
          人员
        </mt-tab-item>
        <mt-tab-item id="tab3">
          <img slot="icon" src="../../../icons/svg/video.svg">
          视频
        </mt-tab-item>
        <mt-tab-item id="tab4">
          <img slot="icon" src="../../../icons/svg/message.svg">
          消息
        </mt-tab-item>
      </mt-tabbar>
    </div>
</template>
<script>
import tq from './tq'
import IntelligentMonitoring from '../intelligent-monitoring'
import IntelligentManagement from '../intelligent-management'
import ProjectDetails from '../project-details'
import PersonnelManagement from '../personnel-management'
import HelmetSnap from '../helmet-snap'
export default {
  name: 'info',
  components: {
    HelmetSnap,
    PersonnelManagement,
    ProjectDetails,
    IntelligentManagement,
    IntelligentMonitoring,
    tq
  },
  data () {
    return {
    }
  },
  methods: {
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

  .info{
    height: 100%;
    width: 100%;
    background-color: #f2f3f5;
  }
  ul{
    list-style:none;
    margin: 0px;
    padding:0px;
    margin-left: 0.32rem;
    margin-right: 0.32rem;
    padding-top: 52px;
    li{
      width:100%;
      display:inline-block;
      position: relative;
      margin-top: 0.22rem;
      margin-bottom: 0.22rem;
      background-color: #ffffff;
      border-radius: 0.2rem;
       .title{
         width: 100%;
         height: 0.6rem;
         text-align: left;
         margin-top: 0.2rem;
       }
      .title-name{
        /*float:left;*/
        font-size: 0.35rem;
        font-family: '方正兰亭黑简体';
        font-weight: 500;
        margin-left: 0.32rem;
        line-height: 0.6rem;
        margin-bottom: 0.14rem;
      }
      .more{
        float: right;
        font-size: 0.25rem;
        font-family: 微软雅黑;
        color: #5f5f6b;
        margin-right: 0.4rem;
        font-weight: 500;
        line-height: 0.6rem;
      }
    }
    .tq{
      height: 2.6rem;
      .content{
        height: 2.6rem;
        width: 100%;
      }
    }
    .znjk{
      height: 3.46rem;
      .content{
        height: 2.86rem;
        width: 100%;
        margin-top: 0.2rem;
      }
    }
    .zngl{
      height: 3.46rem;
      .content{
        height: 2.86rem;
        width: 100%;
        margin-top: 0.2rem;
      }
    }
    .xmxq{
      height: 4.8rem;
      .content{
        height: 4.2rem;
        width: 100%;
      }
    }
    .rygl{
      height: 4rem;
      .content{
        height: 3.4rem;
        width: 100%;
      }
    }
    .aqmzp{
      height: 6rem;
      margin-bottom: 80px;
      .content{
        height: 4.4rem;
        width: 100%;
      }
    }
  }

</style>
